<template>
    <div id="home">
        <el-container class="home-container">
            <el-header>后台管理系统
                <el-button type="info" size="mini" @click="outPur">退出登录</el-button>
            </el-header>
            <el-container>
                <el-aside :width="isCollapse ? '64px':'200px'">
                    <div class="set-button" @click="toge">|||</div>
                    <el-menu
                        background-color="#333744"
                        text-color="#fff"
                        active-text-color="#409EFF"
                        unique-opened
                        :router="true"
                        :collapse="isCollapse"
                        :default-active="this.$route.path"
                        :collapse-transition="false">
                        <el-submenu :index="item.id+''" v-for="item in sideList" :key="item.id">
                            <template slot="title">
                                <i class="el-icon-menu"></i>
                                <span>{{item.name}}</span>
                            </template>
                            <el-menu-item :index="'/home/'+subItem.path+''" v-for="subItem in item.children" :key="subItem.id">
                                <template slot="title">
                                    <i class="el-icon-menu"></i>
                                    <span>{{subItem.name}}</span>
                                </template>
                            </el-menu-item>
                        </el-submenu>
                    </el-menu>
                </el-aside>
                <el-main>
                    <router-view></router-view>
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>
<script>
import Axios from 'axios'
export default {
    data(){
        return{
            isCollapse:false,
            sideList:[]
        }
    },
    mounted(){
        this.getsidelist();
    },
    methods:{
        async getsidelist(){
            const {data: res} = await Axios.get('/sidelist');
            this.sideList = res.data;
        },
        toge(){
            this.isCollapse = !this.isCollapse;
        },
        outPur(){
            window.sessionStorage.clear();
            this.$router.push('/login')
            this.$message({
                message: '成功退出登录',
                type: 'success'
            }); 
        }
    }
}
</script>
<style scoped>
.home-container{
    height: 100vh;
}
.el-header{
    background-color: #373D41;
    line-height: 60px;
    color: white;
    font-size: 24px;
}
.el-button{
    float: right;
    margin: 15px 0 0 0;
}
.el-aside{
    background-color: #333744;
}
.el-menu{
    border-right: none;
}
.set-button{
    background-color: #4A5064;
    font-size: 10px;
    line-height: 30px;
    color: white;
    text-align: center;
    letter-spacing: 0.2em;
    cursor: pointer;
}
.el-main{
    background-color: #EAEDF1;
}
</style>